<template>
  <div>
    <div class="title">
      <span>创建调度请求总数：{{totalTask || 0}}</span>
      <el-date-picker v-model="year" type="year" :clearable="false" size="mini" style="width:100px" value-format="yyyy"
                      format="yyyy年">
      </el-date-picker>
    </div>
    <el-row :gutter="20">
      <el-col :span="4" v-for="item in monthList" :key="item">
        <div class="box">
          <div class="box__title">{{item.month.toString().substr(4)}}月</div>
          <div class="box__body">
            <span :class="{'no-data':!item.instanceCount}">{{item.instanceCount || '暂无数据'}}</span>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8">
        <div class="title">
          <span>按任务场景分类</span>
        </div>
        <div class="box">
          <monthTaskBar></monthTaskBar>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="title">
          <span>按算力类型分类</span>
        </div>
        <div class="box pie-box">
          <div class="pie">
            <monthTaskPie text="60%"></monthTaskPie>
          </div>
          <div class="legend">
            <div class="legend-title">
              <span>总算力(P ops)</span>
              3500
            </div>
            <div class="legend-item">
              <span><i class="use"></i>通用算力</span>
              <span>500</span>
            </div>
            <div class="legend-item">
              <span><i></i>智算算力</span>
              <span>1,500</span>
            </div>
            <div class="legend-item">
              <span><i class="blue"></i>超算算力</span>
              <span>1,500</span>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span='8'>
        <div class="title">
          <span>按用户分类</span>
        </div>
        <div class="box " style="height:420px;">
          <m-define-user-count :project-code="0">
          </m-define-user-count>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import io from '@/module/io'
  import mDefineUserCount from './defineUserCount'
  import monthTaskBar from './monthTaskBar'
  import monthTaskPie from './monthTaskPie'

  export default {
    components: {
      monthTaskBar,
      monthTaskPie,
      mDefineUserCount
    },
    data () {
      return {
        monthList: [],
        year: new Date().getFullYear() + ''
      }
    },
    computed: {
      totalTask () {
        let total = 0
        this.monthList.forEach(e => {
          total += e.instanceCount || 0
        })
        return total
      }
    },
    watch: {
      year (newval) {
        if (newval) this.queryProcessInstanceNumsByMonth()
      }
    },
    created () {
      this.queryProcessInstanceNumsByMonth()
    },
    methods: {
      queryProcessInstanceNumsByMonth () {
        io.get('projects/process-instances/instance-num/month', { year: this.year }).then(res => {
          if (res.code === 0) {
            this.monthList = res.data
          }
        })
      }
    },
    mounted () {

    }
  }
</script>

<style lang="scss" scoped>
.title {
    font-size: 18px;
    margin-bottom: 15px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.box {
    background: #ffffff;
    border-radius: 8px;
    padding: 10px;
    box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25);
    margin-bottom: 20px;
    &__title {
        font-size: 16px;
        font-weight: 600;
        color: #333333;
    }
    &__body {
        text-align: center;
        font-size: 40px;
        border-radius: 8px;
        font-family: Oxanium, Oxanium-Bold;
        font-weight: 700;
        color: #f27011;
        padding: 15px;
        .no-data {
            color: #eaeaea;
            font-weight: normal;
            font-family: YouSheBiaoTiHei, YouSheBiaoTiHei-Regular;
            white-space: nowrap;
        }
    }
}

.pie-box {
    display: flex;
    align-items: center;
    padding: 20px 70px;
    height: 420px;
    .pie {
        width: 300px;
    }
}

.legend {
    margin-left: 60px;
    width: 260px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    backdrop-filter: blur(6px);
    font-family: PingFang SC, PingFang SC-Semibold;
    font-weight: 600;
    color: #333333;
    line-height: 30px;
    & > div {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .legend-title {
        font-size: 14px;
        margin-bottom: 0;
    }
    .legend-item {
        i {
            display: inline-block;
            width: 10px;
            height: 10px;
            background: #33317e;
            border-radius: 2px;
            margin-right: 5px;
        }
        i.use {
            background: #f27011;
        }
        i.blue {
            background: #6360e8;
        }
    }
}
</style>
